Vue.component('my-component',{
    template: '\
    <div>\
        <button @click="handleIncrease">+1</button>\
        <button @click="handleReduce">-1</button>\
    </div>',
    data: function(){
        return {
            counter: 0
        }
    },
    methods: {
        handleIncrease: function(){
            this.counter++;
            this.$emit('increase',this.counter);
        },
        handleReduce: function(){
            this.counter--;
            this.$emit('reduce',this.counter);
        }
    }
})

Vue.component('child-component',{
    template: '\
    <div class="container">\
        <slot msg="来自子组件的内容"></slot>\
    </div>'
})

Vue.component('component-a',{
    template: '\
        <input v-model=parobj.val>',
    props: ['parobj']
})

Vue.component('component-b',{
    template: '\
        <input v-model=value>',
    props: ['value']
})

Vue.component('component-c',{
    template: '\
        <input v-model=value>',
    props: ['value']
})

Vue.component('slot-component',{
    template: '\
        <div class="container"> \
            <div class="header"> \
                <slot name="header"></slot> \
            </div> \
            <div class="main"> \
                <slot></slot> \
            </div> \
            <div class="footer"> \
                <slot name="footer"></slot> \
            </div> \
        </div>',
})

var app = new Vue({
    el: '#app',
    data: {
        picked: false,
        value: 123,
        toggle: false,
        value1: 'a',
        value2: 'b',
        total: 0,
        parobj: {
            val: 1234
        }
    },
    methods: {
        handleGetTotal: function(total){
            this.total = total;
        }
    }
})

